<template>
  <el-button type="primary" @click="onClick" :disabled="disabled" style="margin: 0 10px">{{
    $t('lang.operate.batchApproval')
  }}</el-button>
  <approval-component v-model:visible="visible" :examineAndApprove="selectedRows" />
</template>

<script lang="ts">
import { defineComponent, PropType, ref, computed, provide } from 'vue'
import { ObjectType } from 'typings/interfaces'
import { ElMessage } from 'element-plus'
import { isEmpty } from 'lodash'
import approvalComponent from './approvalComponent.vue'

export default defineComponent({
  components: {
    approvalComponent,
  },
  props: {
    selectedRows: {
      type: Array as PropType<ObjectType[]>,
      required: true,
    },
    onSuccessful: {
      //流程操作按钮成功之后的回调
      type: Function,
      default: undefined,
    },
  },
  setup(props) {
    const visible = ref<boolean>(false)
    const onClick = () => {
      const screen = props.selectedRows.map(
        (item) => item.flowReply != null && item.status == 1 && item.approvalNo != null
      )
      if (!screen.includes(false)) {
        visible.value = true
      } else {
        ElMessage.error('选择的数据中有不可审批的数据，请重新选择！')
      }
    }
    
    provide('parent', props.onSuccessful)
    return {
      visible,
      onClick,
      disabled: computed(
        () =>
          props.selectedRows.map((item) => item.status == 1).includes(false) ||
          isEmpty(props.selectedRows)
      ),
    }
  },
})
</script>
